<template>
  <!-- 线下技术交流讲座 -->
  <div class="talkLecture">
    <div class="talkTitle">
      <div class="meetingName">
        <el-dropdown :placement="end" :hide-on-click="falg">
          <span class="el-dropdown-link">
            会议名称
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <p>
                <el-input v-model="input" style="width: 200px" @change="add()" placeholder="请输入内容"></el-input>
              </p>
              <div>
                <h3>名称</h3>
                <p>
                  <el-checkbox v-model="checked1">{{room.meetingName}}</el-checkbox>
                </p>
                <p>
                  <el-checkbox v-model="checked3">{{name.meetingName}}</el-checkbox>
                </p>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="name">姓名</div>
      <div class="unit">单位</div>
      <div class="director">职务</div>
      <div class="industry">行业</div>
      <div class="phone">手机号</div>
      <div class="email">邮箱</div>
      <div class="address">联系地址</div>
      <div class="agree switch">
        <el-checkbox v-model="checkAll"  @change="agree">同意</el-checkbox>
      </div>
      <div class="refuse switch">
        <el-checkbox v-model="checkAll2" @change="refuse(checkAll2)">拒绝</el-checkbox>
      </div>
      <div class="meetingName">
        <el-dropdown :placement="end" :hide-on-click="falg">
          <span class="el-dropdown-link">
            会议名称
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <p>
                <el-input v-model="title" style="width: 200px" placeholder="请输入内容"></el-input>
              </p>
              <div>
                <h3>名称</h3>
                <p>
                  <el-checkbox v-model="checked1">已同意</el-checkbox>
                </p>
                <p>
                  <el-checkbox v-model="checked3">已拒绝</el-checkbox>
                </p>
                <p>
                  <el-checkbox v-model="checked4">未处理</el-checkbox>
                </p>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div style="margin-left:0.8rem">操作</div>
    </div>
    <div class="talkItem">
      <div class="itemBox" v-for="(item,index) in list" :key="index">
        <div class="meetingName">{{item.meetingName}}1</div>
        <div class="name">{{item.userName}}</div>
        <div class="unit">{{item.enterprise}}</div>
        <div class="director">{{item.position}}</div>
        <div class="industry">{{item.industryInvolved}}</div>
        <div class="phone">{{item.phone}}</div>
        <div class="email">{{item.mailbox}}</div>
        <div class="address">{{item.contactAddress}}</div>
        <div class="switch agree">
          <el-checkbox :label="item.id" @change="lab" v-model="checklabel">
            <span></span>
          </el-checkbox>
        </div>
        <div class="switch refuse">
          <el-checkbox :label="item.id" @change="lab2">
            <span></span>
          </el-checkbox>
        </div>
        <div style="margin-left:0.94rem">已拒绝</div>
        <div style="margin-left:1.08rem;color:orange;">撤销</div>
      </div>
    </div>
    <div class="all" style="margin-top:20px;">提交</div>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="20"
    ></el-pagination>
  </div>
</template>
<script>
import { content, cuss, price, list } from "../../request/home";

export default {
  name: "",
  components: {},
  data() {
    return {
      checklabel:[],
      checkAll: false,
      checkAll2: false,
      lectureData: [],
      options: [
        {
          value: "选项1",
          label: "同意",
        },
      ],
      end: "bottom",
      list: [],
      pagesize: 5,
      input: "",
      falg: false,
      checked: false,
      room: {},
      name: {},
      name1: "",
      li: [],
      value: "",
      check: false,
      che: false,
      checked1: false,
      checked3: false,
      checked4: false,
      title: ""
    };
  },
  created() {},
  mounted() {
    this.save();
    this.root();
  },
  methods: {
    // 拒绝全选
    refuse(checkAll2) {
      console.log(checkAll2);
      if (checkAll2 == true) {
        console.log(2);
      }
    },
    // 同意全选
    agree(value) {
      
      if (this.checkAll== true) {
      
       this.list.forEach(item =>{
         this.checklabel.push(item.userName)
       })
       console.log( this.checklabel);
      }else{
          this.checklabel=[]
      }
    },
    // 同意单个
    lab(value) {
      console.log(this.checklabel.length)
     console.log(this.list.length)
      if(this.checklabel.length !== this.list.length){
        console.log(this.checklabel.length)
          this.checkAll=true
      }else{
        this.checkAll=false
      }
      
    },
    // 拒绝单个
    lab2(checked) {
      console.log(checked);
      if (this.checkAll2 == true) {
      }
    },
    changeStatus(back) {
      this.value = back;
    },
    handleCurrentChange(val) {
      content({ pageNum: val, pageSize: this.pagesize }).then((res) => {
        this.list = res.data.data.list;
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    save() {
      content({ pageNum: 1, pageSize: 5 }).then((res) => {
        this.list = res.data.data.list;
      });
    },
    root() {
      list().then((res) => {
        console.log(res);
        this.room = res.data.data[0];
        this.name = res.data.data[1];
      });
    },

    add() {
      console.log(this.input);
      this.li = [];
      cuss({
        input: this.input,
      }).then((res) => {
        console.log(res);
        this.list = res.data.data.list;
      });
    },
  },
};
</script>
<style lang='less' scoped>
.talkLecture {
  .talkTitle {
    width: 15.3rem;
    height: 0.45rem;
    background: rgba(241, 241, 241, 1);
    display: flex;
    div {
      line-height: 0.45rem;
      text-align: center;
      font-size: 0.14rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .meetingName {
      margin-left: 0.61rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
    .name {
      margin-left: 0.3rem;
    }
    .unit {
      margin-left: 0.89rem;
      margin-right: 1.03rem;
    }
    .industry {
      margin-left: 0.55rem;
      margin-right: 0.55rem;
    }
    .email {
      margin-left: 1.1rem;
      margin-right: 1.66rem;
    }
    .agree {
      margin-left: 0.9rem;
      margin-right: 0.3rem;
    }
    /deep/ .el-input__inner {
      -webkit-appearance: none;
      background-color: rgba(241, 241, 241, 1);
      background-image: none;
      border-radius: 4px;
      border: none;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 0.4rem;
      line-height: 0.4rem;
      outline: 0;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 50%;

      /deep/ .el-input__icon {
        height: 0.4rem;
        width: 0.25rem;
        line-height: 0.4rem;
        text-align: center;
        transition: all 0.3s;
        line-height: 0.4rem;
        margin-left: -1rem;
      }
      /deep/ .offline_box .listBox[data-v-5adfdacc] .el-input__inner {
        height: 0.4rem !important;
        color: #000 !important;
        display: inline-block;
        height: 0.4rem;
        line-height: 0.4rem;
        z-index: 999999;
      }
      /deep/
        .offline_box
        .listBox
        .listTitle[data-v-5adfdacc]
        .el-input__inner {
        padding: 0 0.15rem;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 70%;
      }
      /deep/.el-input,
      .el-input--suffix {
        input {
          width: 70%;
          height: 0.3rem !important;
          // border-bottom: 0.01rem solid rgba(204, 204, 204, 1);
          color: #333333;
          font-size: 0.16rem;
        }
        ::-webkit-input-placeholder {
          /* WebKit, Blink, Edge */
          color: #333333;
          text-align: center;
        }
      }
    }
  }
  .talkItem {
    width: 15.3rem;
    .itemBox {
      height: 0.45rem;
      border: 0.01rem solid rgba(238, 238, 238, 1);
      display: flex;

      div {
        line-height: 0.45rem;
        text-align: center;
        font-size: 0.14rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
      .meetingName {
        width: 0.94rem;
        margin-left: 0.46rem;
      }
      .name {
        width: 0.6rem;
        margin-left: 0.12rem;
        margin-right: 0.37rem;
      }
      .unit {
        width: 1.39rem;
      }
      .director {
        margin-left: 0.14rem;
        margin-right: 0.44rem;
      }
      .industry {
        margin-right: 0.3rem;
        width: 0.3rem;
      }
      .phone {
        width: 0.89rem;
        margin-right: 0.33rem;
      }
      .address {
        margin-left: 0.2rem;
      }
      .boder {
        margin-left: -20px;
      }
      .switch {
        margin-left: 0.4rem;
      }
    }
  }
  .all {
    float: right;
    margin-right: 80px;
    width: 100px;
    height: 30px;
    background: #004cb3;
    color: #ffffff;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
}
</style>
